<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui">
	<p:menubar model="#{organizeMenuManagedBean.model}" id="appMenuBar"
		style="width:135px;" />
	<h:form id="organizeMenuForm" prependId="false">
		<p:growl id="growl" showDetail="true" />
		<!-- <p:menubar model="#{organizeMenuManagedBean.model}" id="appMenuBar"
			style="width:135px;" /> -->
		<h:panelGrid>
			<p:dataTable var="l1" value="#{organizeMenuManagedBean.l1List}"
				id="level1Table" rowKey="#{l1.l1Id}"
				selection="#{organizeMenuManagedBean.selectedLevel1DTO}"
				selectionMode="single" scrollable="true">

				<p:ajax event="rowSelect"
					listener="#{organizeMenuManagedBean.l1Listener}"
					update=":tabview1:organizeMenuForm" />

				<p:column headerText="Level 1 ID">
					<h:outputText value="#{l1.l1Id}" />
				</p:column>
				<p:column headerText="Name" id="level1Name">
					<h:outputText value="#{l1.l1Name}" />
				</p:column>
			</p:dataTable>
			<p:spacer height="25px" />
			<h:panelGrid style="float: right;" columns="2">
				<p:commandButton value="Add" update=":tabview1:organizeMenuForm"
					action="#{organizeMenuManagedBean.l1add}" />
				<p:commandButton value="Edit" update=":tabview1:organizeMenuForm"
					action="#{organizeMenuManagedBean.l1Edit}" />
			</h:panelGrid>
			<p:dataTable var="l2" id="level2Table"
				rendered="#{!empty(organizeMenuManagedBean.selectedLevel1DTO.l1Id)}"
				value="#{organizeMenuManagedBean.selectedLevel1DTO.level2Tables}"
				rowKey="#{l2.l2Id}"
				selection="#{organizeMenuManagedBean.selectedLevel2DTO}"
				selectionMode="single" scrollable="true">
				<p:ajax event="rowSelect"
					listener="#{organizeMenuManagedBean.l2Listener}"
					update=":tabview1:organizeMenuForm" />
				<p:column headerText="Level 2 ID">
					<h:outputText value="#{l2.l2Id}" />
				</p:column>
				<p:column headerText="Name" id="level2Name">
					<h:outputText value="#{l2.l2Name}" />
				</p:column>
			</p:dataTable>
			<p:spacer height="25px" />
			<h:panelGrid style="float: right;" columns="2"
				rendered="#{!empty(organizeMenuManagedBean.selectedLevel1DTO.l1Id)}">
				<p:commandButton value="Add" update=":tabview1:organizeMenuForm"
					action="#{organizeMenuManagedBean.l2add}" />
				<p:commandButton value="Edit" update=":tabview1:organizeMenuForm"
					action="#{organizeMenuManagedBean.l2Edit}" />
			</h:panelGrid>
			<p:dataTable var="l3" id="level3Table"
				rendered="#{!empty(organizeMenuManagedBean.selectedLevel2DTO.l2Id)}"
				value="#{organizeMenuManagedBean.selectedLevel2DTO.level3Tables}"
				rowKey="#{l3.l3Id}"
				selection="#{organizeMenuManagedBean.selectedLevel3DTO}"
				selectionMode="single" scrollable="true">

				<p:column headerText="Level 3 ID">
					<h:outputText value="#{l3.l3Id}" />
				</p:column>
				<p:column headerText="Name" id="level3Name">
					<h:outputText value="#{l3.l3Name}" />
				</p:column>
			</p:dataTable>
			<p:spacer height="25px" />
			<h:panelGrid style="float: right;" columns="2"
				rendered="#{!empty(organizeMenuManagedBean.selectedLevel2DTO.l2Id)}">
				<p:commandButton value="Add" update=":tabview1:organizeMenuForm"
					action="#{organizeMenuManagedBean.l3add}" />
				<p:commandButton value="Edit" update=":tabview1:organizeMenuForm"
					action="#{organizeMenuManagedBean.l3Edit}" />
			</h:panelGrid>
			<p:fieldset id="l1AddEdit"
				rendered="#{organizeMenuManagedBean.displayl1AddFlag || organizeMenuManagedBean.displayl1EditFlag}"
				legend="Level1 Add/Edit">
				<h:panelGrid columns="4"
					rendered="#{!organizeMenuManagedBean.previewMenuFlag }">
					<h:outputText value="Level 1 Name" />
					<h:inputText value="#{organizeMenuManagedBean.level1Name}" />
					<p:commandButton value="Save"
						update=":tabview1:organizeMenuForm:l1AddEdit"
						action="#{organizeMenuManagedBean.l1AddEditSave}" />
					<p:commandButton value="Cancel" update=":tabview1:organizeMenuForm"
						action="#{organizeMenuManagedBean.l1AddEditCancel}" />
				</h:panelGrid>
				<h:panelGrid rendered="#{organizeMenuManagedBean.previewMenuFlag }"
					columns="3" id="preview">
					<p:menubar model="#{organizeMenuManagedBean.previewModel}"
						style="width:125px;" />
					<p:commandButton value="Publish"
						update=":tabview1:organizeMenuForm"
						action="#{organizeMenuManagedBean.l1AddPublish}" />
					<p:commandButton value="Cancel"
						update=":tabview1:organizeMenuForm:l1AddEdit"
						action="#{organizeMenuManagedBean.l1AddPublishCancel}" />
				</h:panelGrid>
			</p:fieldset>
			<p:fieldset id="l2AddEdit"
				rendered="#{organizeMenuManagedBean.displayl2AddFlag || organizeMenuManagedBean.displayl2EditFlag}"
				legend="Level2 Add/Edit">
				<h:panelGrid columns="4"
					rendered="#{!organizeMenuManagedBean.previewMenuFlag }">
					<h:outputText value="Level 1 Name" />
					<h:outputText
						value="#{organizeMenuManagedBean.selectedLevel1DTO.l1Name}" />
					<p:spacer />
					<p:spacer />
					<h:outputText value="Level 2 Name" />
					<h:inputText value="#{organizeMenuManagedBean.level2Name}" />
					<p:commandButton value="Save"
						update=":tabview1:organizeMenuForm:l2AddEdit"
						action="#{organizeMenuManagedBean.l2AddEditSave}" />
					<p:commandButton value="Cancel" update=":tabview1:organizeMenuForm"
						action="#{organizeMenuManagedBean.l2AddEditCancel}" />
				</h:panelGrid>
				<h:panelGrid rendered="#{organizeMenuManagedBean.previewMenuFlag }"
					columns="3" id="preview2">
					<p:menubar model="#{organizeMenuManagedBean.previewModel}"
						style="width:125px;" />
					<p:commandButton value="Publish"
						update=":tabview1:organizeMenuForm"
						action="#{organizeMenuManagedBean.l2AddPublish}" />
					<p:commandButton value="Cancel"
						update=":tabview1:organizeMenuForm:l2AddEdit"
						action="#{organizeMenuManagedBean.l2AddPublishCancel}" />
				</h:panelGrid>
			</p:fieldset>
			<p:fieldset id="l3AddEdit"
				rendered="#{organizeMenuManagedBean.displayl3AddFlag || organizeMenuManagedBean.displayl3EditFlag}"
				legend="Level3 Add/Edit">
				<h:panelGrid columns="4"
					rendered="#{!organizeMenuManagedBean.previewMenuFlag }">
					<h:outputText value="Level 1 Name" />
					<h:outputText
						value="#{organizeMenuManagedBean.selectedLevel1DTO.l1Name}" />
					<p:spacer />
					<p:spacer />
					<h:outputText value="Level 2 Name" />
					<h:outputText
						value="#{organizeMenuManagedBean.selectedLevel2DTO.l2Name}" />
					<p:spacer />
					<p:spacer />
					<h:outputText value="Level 3 Name" />
					<h:inputText value="#{organizeMenuManagedBean.level3Name}" />
					<p:commandButton value="Save"
						update=":tabview1:organizeMenuForm:l3AddEdit"
						action="#{organizeMenuManagedBean.l3AddEditSave}" />
					<p:commandButton value="Cancel" update=":tabview1:organizeMenuForm"
						action="#{organizeMenuManagedBean.l3AddEditCancel}" />
				</h:panelGrid>
				<h:panelGrid rendered="#{organizeMenuManagedBean.previewMenuFlag }"
					columns="3" id="preview3">
					<p:menubar model="#{organizeMenuManagedBean.previewModel}"
						style="width:125px;" />
					<p:commandButton value="Publish"
						update=":tabview1:organizeMenuForm"
						action="#{organizeMenuManagedBean.l3AddPublish}" />
					<p:commandButton value="Cancel"
						update=":tabview1:organizeMenuForm:l3AddEdit"
						action="#{organizeMenuManagedBean.l3AddPublishCancel}" />
				</h:panelGrid>
			</p:fieldset>
			<p:spacer height="500px;"></p:spacer>
		</h:panelGrid>
	</h:form>

</ui:composition>